<!-- templates/myapp/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>City开始训练</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/trainingStart.css' %}">

    <script>//实现隐藏导航的效果
    toggleNavbar = function () {
        const navbar = document.getElementById('navbar');
        const mainContent = document.getElementById('main-content');
        const toggleButton = document.getElementById('toggleButton'); // 获取按钮元素

        if (navbar.classList.contains('hidden')) {
            navbar.classList.remove('hidden'); // 显示导航
            mainContent.style.width = '80%'; // 恢复主内容宽度
            toggleButton.innerHTML = '<img  class="button4-icon" src="{% static 'icons/chevron-left.svg' %}" alt="城市图标">'; // 切换按钮文字
        } else {
            navbar.classList.add('hidden'); // 隐藏导航
            mainContent.style.width = '100%'; // 主内容占满整个页面
            toggleButton.innerHTML = '<img  class="button4-icon" src="{% static 'icons/chevron-right.svg' %}" alt="城市图标">'; // 切换按钮文字
        }
    }
    </script>
</head>
<body>
<div class="sidebar" id="navbar"> <!--导航-->
    <img class="logo" src="{% static 'icons/logo.jpg' %}" alt="logo图标">
    <p class="title">SecTraffic</p>
    <p class="underline"></p>
    <div>
        <a href="{% url 'training' %}">
            <button class="button1">
                <img class="button1-icon" src="{% static 'icons/building.png' %}" alt="城市图标">
                <span> City----我要训练</span>
            </button>
        </a>
    </div>
    <div>
        <a href="{% url 'predicting' %}">
            <button class="button1">
                <img class="button1-icon" src="{% static 'icons/building.png' %}" alt="城市图标">
                <span> City----我要预测</span>
            </button>
        </a>
    </div>
</div>

<div class="content" id="main-content">
    {#  实现主页面#}
    <p>
        <!-- 点击按钮以隐藏或显示导航 -->
        <button class="button4" onclick="toggleNavbar()" id="toggleButton">
            <img class="button4-icon" src="{% static 'icons/chevron-left.svg' %}" alt="隐藏">
        </button>
    </p>
    <div id="drop-area">
        <div class="icon-container">
            <img src="{% static 'icons/upload-left.png' %}" alt="Icon" class="upload-left">
        </div>
        <img class="upload-icon" src="{% static 'icons/upload.png' %}">
        <p class="upload-text">将文件拖放至此或浏览本地文件......</p>
        <form id="upload-form" enctype="multipart/form-data">
            <input type="file" id="file-input" class="hidden-file-input" name="file" multiple style="display: none;">
            <button id="upload-button" class="upload-btn">点击上传</button>
        </form>
    </div>

    <div id="text-input-area">
        <div class="input-icon-container">
            <img src="{% static 'icons/input-left.png' %}" alt="Icon">
        </div>
        <p class="input-text">输入占全局模型的比重:</p>
        <input type="text" id="textInput" name="textInput">
    </div>

    <div id="ready-area">
        <div class="ready-icon-container">
            <img src="{% static 'icons/ready-left.png' %}" alt="Icon">
        </div>
        <p class="ready-text">其余城市已经准备就绪</p>
        <img class="ready-icon" src="{% static 'icons/ready.png' %}">
    </div>


    <a href="{% url 'training' %}">
        <button class="start-btn">开始训练</button>
    </a>

    <button class="button2">开<br>始<br>训<br>练</button>

    <button class="button3" onClick="location.href='/City/training/trainingResult'">训<br>练<br>结<br>果</button>
</div>

<script>
    const dropArea = document.getElementById('drop-area');
    const fileInput = document.getElementById('file-input');
    const preview = document.getElementById('preview');

    // Prevent default drag behaviors
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, preventDefaults, false);
    });

    // Highlight drop area when item is dragged over it
    ['dragenter', 'dragover'].forEach(eventName => {
        dropArea.addEventListener(eventName, highlight, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, unhighlight, false);
    });

    // Handle dropped files
    dropArea.addEventListener('drop', handleDrop, false);

    // Prompt for file selection when drop area is clicked
    dropArea.addEventListener('click', () => fileInput.click());

    // Handle file selection through file input
    fileInput.addEventListener('change', handleFiles, false);

    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    function highlight(e) {
        dropArea.classList.add('highlight');
    }

    function unhighlight(e) {
        dropArea.classList.remove('highlight');
    }

    function handleDrop(e) {
        const dt = e.dataTransfer;
        const files = dt.files;

        handleFiles(e);
    }

    function handleFiles(e) {
        const files = e.target.files || e.dataTransfer.files;

        preview.innerHTML = '';

        [...files].forEach(file => {
            if (file.type.startsWith('image/')) {
                const reader = new FileReader();
                reader.onload = function(event) {
                    const img = document.createElement('img');
                    img.src = event.target.result;
                    preview.appendChild(img);
                };
                reader.readAsDataURL(file);
            } else {
                const p = document.createElement('p');
                p.textContent = `${file.name} (${Math.round(file.size / 1024)} KB)`;
                preview.appendChild(p);
            }
        });
    }
</script>

</body>
</html>